{% extends "hs-base.html" %}
{% block style %}
    <style type="text/css">
        .modal.fade.in{
            left: 25%;
        }
    </style>
{% endblock %}

{% block div %}
    <div id="addmember" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
            <div class="card-box modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                </div>

                                                <div class="modal-body">
                                                    <p class="text-muted font-14 m-b-20">请选择需要添加的人员</p>
                                                    <form action="#" method="post">

                                                        <div class="form-group">
                                                <label>选择人员</label>
                                                <select id="select_member" name="select_member" class="select2 form-control select2-multiple select2-hidden-accessible" multiple data-placeholder="请选择">
                                                </select>
                                                 <input id="add-ip" type="hidden" class="content1" name="host" value=#data-ip>
                                            </div>


                                                        <div class="form-group m-b-0">
                                            </div>



                                                    <button type="submit" class="btn btn-custom waves-effect waves-light" name="fun" value="addmember">
                                                        添加
                                                    </button>
                                                    <button type="reset" data-dismiss="modal" class="btn btn-default btn-light waves-effect m-l-5">
                                                        关闭
                                                    </button>
                                                    </form>
                                                </div>
                                </div>
        </div>
                                    </div><!-- /.modal -->

    <div class="content">
                    <div class="container-fluid">
                    <form action="#" method="post">
                        <div class="row form-group">
                            <div class="col-sm-2">
                                <button type="submit" class="btn btn-custom btn-rounded w-md waves-effect waves-light mb-4" name="fun" value="getserver"><i class="fa fa-search"></i> 查询 </button>
                            </div>
                            <div class="col-sm-8">
                                <div class="project-sort pull-right">
                                    <div class="project-sort-item">
                                            <div class="form-group">
                                                <label for="phase-select">部门 :</label>
                                                <select class="form-control ml-2 form-control-sm" id="phase-select">
                                                    <option>请选择</option>
                                                    <option>测试一组</option>
                                                    <option>测试二组</option>
                                                    <option>测试三组</option>
                                                </select>
                                            </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-2">
                                <div class="project-sort pull-right">
                                    <div class="project-sort-item">
                                            <div class="form-group">
                                                <label for="sort-select">小组 :</label>
                                                <select name='small_group' class="form-control ml-2 form-control-sm" id="sort-select">
                                                    <option>请选择</option>
                                                </select>
                                            </div>
                                    </div>
                                </div>
                            </div><!-- end col-->
                        </div>
                    </form>
                        <!-- end row -->
                        <div class="row" id="product">
                        {% for server in server_lists %}

                            <div class="col-xl-4">
                                <div class="card-box project-box">
                                    <div class="dropdown pull-right">
                                        <a href="#" class="dropdown-toggle card-drop arrow-none" data-toggle="dropdown" aria-expanded="false">
                                            <h3 class="m-0 text-muted"><i class="mdi mdi-dots-horizontal"></i></h3>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                                            <a id={{ server[4] }} onclick="getmember(this)" class="btn" data-ip="{{ server[4] }}" data-toggle="modal" data-target="#addmember"><i class="mdi mdi-star mr-2 font-18 text-muted vertical-middle" ></i>新增成员</a>
                                            <a class="btn" data-toggle="modal" data-target="#addmember"><i class="mdi mdi-check-all mr-2 text-muted font-18 vertical-middle"></i>删除成员</a>
                                            <a class="btn" data-toggle="modal" data-target="#addmember"><i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>修改信息</a>
                                        </div>
                                    </div>
                                    <p class="text-muted text-uppercase mb-0 font-13">{{ server[1] }}</p>
                                    <h4 class="mt-0 mb-3"><a href="" class="text-dark">{{ server[0] }}</a></h4>
                                    <p class="text-muted font-13">{{ server[2] }}</p>

                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <h3 class="mb-0">{{ server[4] }}</h3>
                                            <p class="text-muted">环境地址</p>
                                        </li>
                                        <li class="list-inline-item">
                                            <h3 class="mb-0">{{ server[3] }}</h3>
                                            <p class="text-muted">环境类型</p>
                                        </li>

                                    </ul>

                                    <div class="project-members mb-4">
                                        <label class="mr-3">成员列表 :</label><p class="text-muted">{{ server[5] }}</p>
                                    </div>


                                </div>
                            </div><!-- end col-->

                        {% endfor %}
                        <!-- end row -->
                        </div>


                    </div> <!-- container -->
                        </div>
                        <!-- end row -->

                    </div> <!-- container -->

                </div>

{% endblock %}


{% block script %}
    <script type="text/javascript">
        function getserver() {
                var objS2=document.getElementById('sort-select');
                var provice2=objS2.options[objS2.selectedIndex].value;
                var data={};
                data['fun']='getserver';
                data['small_group']=provice2;

                $.ajax({
                    type: 'POST',
                    url:"/all-server",
                    data:data,  //转化字符串
                });

        }
        $(document).ready(function(){
            $("#phase-select").on('change',function(){
                var objS=document.getElementById('phase-select');
                var provice=objS.options[objS.selectedIndex].value;
                var data={};
                data['fun']='getgroup';
                data['big_group']=provice;
                $.ajax({
                    type: 'POST',
                    url:"/all-server",
                    data:data,
                    success:function(data){
                        //alert(data);
                        addselect(data);
                    }
                });
            });
        });
        function addselect(data)
        {
            number=data.split(" ");
            var select=document.getElementById("sort-select");
            //删除所有原来的子结点元素
            $("#sort-select").empty();
            for(var i=0;i<number.length;++i)
            {
                var newItem=document.createElement("option");
                var newItemText=document.createTextNode(number[i]);
                newItem.appendChild(newItemText);
                select.appendChild(newItem);
            }
        }

        function getmember(obj) {
            var data = {serverip : obj.id,fun : 'getmember'}
                $.ajax({
                    type: 'POST',
                    url:"/all-server",
                    data:data,  //转化字符串
                    success:function(data){ //成功的话，得到消息
                        //alert(data);
                        addselect1(data);
                    }
                });

        }
        function addselect1(data)
        {
            number=data.split(" ");
            var select=document.getElementById("select_member");
            //删除所有原来的子结点元素
            $("#sort-select").empty();
            for(var i=0;i<number.length;++i)
            {
                var newItem=document.createElement("option");
                var newItemText=document.createTextNode(number[i]);
                newItem.appendChild(newItemText);
                select.appendChild(newItem);
            }
        }
        $('#addmember').on('show.bs.modal',function (event) {
            var btn = $(event.relatedTarget);
            var modal = $(this);
            var modalValue = btn.data('ip');
            modal.find('.content1').val(modalValue);


        })
    </script>
{% endblock %}